<template>
  <el-container style="height: 97vh;">
    <el-header style="margin-top: 4vh; margin-bottom: -3vh;">
      <!-- <h1>标题一</h1> -->
      <!-- <h2>标题二
        <PhotoSelect/>
      </h2> -->
      <h2 style="">
        <PhotoSelect @update-values="updateValues"/>
      </h2>
    </el-header>
    <!-- <el-container style="height: 60vh; overflow-y: hidden; margin-bottom: 1vh;"> -->
    <el-container class = "containerone">
      <el-aside width="31vh" >
        <el-button 
          @click="toggleBoxes" 
          class="custom-button">
          {{ showBoxes ? '隐藏' : '展示' }}框框
        </el-button>
        <div class="scroll-container">
          <transition-group name="box" tag="div" class="container">
            <div 
              v-for="(box, index) in boxes" 
              :key="index" 
              class="box" 
              @mouseover="handleMouseOver(index)" 
              @mouseout="handleMouseOut"
              @click="handleClick(index)">{{ box.label }}
            </div>
          </transition-group>
        </div>

        <el-container class="containerLeftSolid" >
        <div class="block2" style="display: block; align-items: center; width: 22vh; margin-bottom: 1.5vx; padding-left: 0vh;">
          <span class="demonstration">PhotoA</span>
          <el-slider v-model="value0" style="width: 22vh; margin-top: -0.5vh;" class="The-custom-slider0"></el-slider>
        </div>
        <div class="block2" style="display: block; align-items: center; width: 22vh; margin-bottom: 1.5vx; padding-left: 0vh;">
          <span class="demonstration">PhotoB</span>
          <el-slider v-model="value1" style="width: 22vh; margin-top: -0.5vh;" class="The-custom-slider1"></el-slider>
        </div>
        <div class="block2" style="display: block; align-items: center; width: 22vh; margin-bottom: 1.5vx; padding-left: 0vh;">
          <span class="demonstration" style="">Change</span>
          <el-slider v-model="value2" style="width: 22vh; margin-top: -0.5vh;" class="The-custom-slider2"></el-slider>
        </div>
        
      </el-container>

      </el-aside>
      <!-- <el-main style="background-color: aqua;"> -->
      <!-- <el-main style="background-color: aqua;  margin-bottom: 0vh; display: flex; overflow-y: hidden;"> -->
      <el-main style=" margin-bottom: 0vh; display: block; overflow-y: hidden; ">
        <!-- <div style="margin-top: -3vh; width: 170vh;"></el-main>
          <PhotoMain/>
        </div> -->
        <PhotoMain
          ref="photoMainRef"
          :width-percentage="selectedWidthPercentage"
          :height-percentage="selectedHeightPercentage"
          :selected-index="selectedIndex"
          :value0="value0"
          :value1="value1"
          :value2="value2"
          :scale="scale"
          @update:value0="value0 = $event"
          @update:value1="value1 = $event"
          @update:value2="value2 = $event"
          @update:scale="scale = $event"
          style="margin: auto; border-radius: 0.8vh; height: 87vh; "
        />
        <!-- <PhotoMain
          :width-percentage="selectedWidthPercentage"
          :height-percentage="selectedHeightPercentage"
          :selected-index="selectedIndex"
          :value0="value0"
          :value1="value1"
          :value2="value2"
          @update:value0="value0 = $event"
          @update:value1="value1 = $event"
          @update:value2="value2 = $event"
          style="margin-top: -1.8vh; margin-left: 0vh; border-radius: 0.8vh;  width: 100%; height: 100%;"
        /> -->

        <!-- 主内容区 -->
      </el-main>
      
    </el-container>
    <!-- <el-container style="width: 100%; height: 40vh;"> -->
      <!-- <el-container class="containerLeftSolid" style="background-color: rgb(45, 66, 77); width: 37vh; align-items: center;"> -->
        

      
    <!-- </el-container> -->
  </el-container>
  
</template>

<script>
import { ref, watch } from 'vue';
import { useStore } from 'vuex';
import { ElButton, ElContainer, ElHeader, ElAside, ElMain, ElSlider } from 'element-plus';
import PhotoSelect from './PhotoSelect.vue';
import PhotoMain from './PhotoMain.vue';

export default {
  name: 'LeftListThe3',
  components: {
    ElButton,
    ElContainer,
    ElHeader,
    ElAside,
    ElMain,
    ElSlider,
    PhotoSelect,
    PhotoMain
  },
  setup() {
    const store = useStore();
    const value0 = ref(100);
    const value1 = ref(0);
    const value2 = ref(12);

    const boxes = ref([]);
    const showBoxes = ref(false);

    const selectedWidthPercentage = ref(null);
    const selectedHeightPercentage = ref(null);
    const selectedIndex = ref(null);
    const photoMainRef = ref(null);
    const callChildFunction = () => {
      if (photoMainRef.value) {
        photoMainRef.value.shrinkImage();
      }
    };

    const handleMouseOver = (index) => {
      resetClasses();
      const elements = document.querySelectorAll('.box');
      elements[index]?.classList.add('hovered');
      elements[index - 1]?.classList.add('prev1');
      elements[index - 2]?.classList.add('prev2');
      elements[index + 1]?.classList.add('next1');
      elements[index + 2]?.classList.add('next2');
    };



    const toggleBoxes = () => {
      if (showBoxes.value) {
        boxes.value = [];
      } else {
        boxes.value = store.state.points.map(point => ({
          label: point.label,
          WidthPercentage: point.x_ratio,
          HeightPercentage: point.y_ratio
        }));
      }
      showBoxes.value = !showBoxes.value;
    };

    // const handleMouseOver = (index) => {
    //   console.log(`Mouse over on index: ${index}`);
    // };

    // const handleMouseOut = () => {
    //   console.log('Mouse out');
    // };


    const resetClasses = () => {
      const elements = document.querySelectorAll('.box');
      elements.forEach(el => el.className = 'box');
    };

    const handleMouseOut = () => {
      resetClasses();
    };

    const handleClick = (index) => {
      callChildFunction();
      const box = boxes.value[index];
      // selectedWidthPercentage.value = null;
      // selectedHeightPercentage.value = null;
      // selectedIndex.value = null;
      selectedWidthPercentage.value = box.WidthPercentage;
      selectedHeightPercentage.value = box.HeightPercentage;
      selectedIndex.value = index;
      
      console.log(`Index: ${index}, Box: ${JSON.stringify(box)},label: ${box.labele}, WidthPercentage: ${box.WidthPercentage}, HeightPercentage: ${box.HeightPercentage}`);
    };

    const updateValues = (newValues) => {
      const duration = 1000; // 1秒
      const startTime = performance.now();

      const startValues = {
        value0: value0.value,
        value1: value1.value,
        value2: value2.value
      };

      const animate = (time) => {
        const elapsedTime = time - startTime;
        const progress = Math.min(elapsedTime / duration, 1);

        value0.value = startValues.value0 + progress * (newValues.value0 - startValues.value0);
        value1.value = startValues.value1 + progress * (newValues.value1 - startValues.value1);
        value2.value = startValues.value2 + progress * (newValues.value2 - startValues.value2);

        if (progress < 1) {
          requestAnimationFrame(animate);
        }
      };

      requestAnimationFrame(animate);
    };

    watch(() => store.state.points, (newValue) => {
      boxes.value = newValue.map(point => ({
        label: point.label,
        WidthPercentage: point.x_ratio,
        HeightPercentage: point.y_ratio
      }));
    });

    return {
      boxes,
      showBoxes,
      handleMouseOver,
      handleMouseOut,
      handleClick,
      toggleBoxes,
      value0,
      value1,
      value2,
      updateValues,
      selectedWidthPercentage,
      selectedHeightPercentage,
      selectedIndex,
      callChildFunction,
      photoMainRef,
    };
  }
};
</script>


<style scoped>
/* 过渡效果 */
.box-enter-active, .box-leave-active {
  transition: all 0.5s;
}

.box-enter-from, .box-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

.box-leave-from, .box-enter-to {
  opacity: 1;
  transform: translateX(0);
}

.box-move {
  transition: transform 0.5s;
}

/* 重置所有元素的默认边距和填充，并设置 box-sizing 属性 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置 body 的样式，使内容居中 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0f1b26;
  overflow: hidden;
}

/* 设置 el-aside 的样式 */
el-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden; /* 禁用 el-aside 内部滚动条 */
  width: 30vw; /* 使用相对单位设置宽度 */
}

/* 设置 scroll-container 的样式 */
.scroll-container {
  min-height: 50vh;
  overflow-y: auto; /* 启用垂直滚动条 */
  max-height: 50vh; /* 设置最大高度，允许滚动 */
  width: 100%;
  padding-right: 0px; /* 预留滚动条宽度 */
  box-sizing: content-box;
}

/* 自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 0.5vw; /* 滚动条的宽度，使用相对单位 */
}

.scroll-container::-webkit-scrollbar-track {
  background: #1d3244; /* 滚动条轨道的背景颜色 */
  border-radius: 0.25vw; /* 圆角 */
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #5468FF; /* 滚动条滑块的颜色 */
  border-radius: 0.25vw; /* 圆角 */
  border: 0.1vw solid #1d3244; /* 滑块的边框，可以使滑块看起来更细 */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #89E5FF; /* 滚动条滑块悬停时的颜色 */
}

.scroll-container::-webkit-scrollbar-thumb:active {
  background: #3c4fe0; /* 滚动条滑块激活时的颜色 */
}

/* 设置 container 的样式，使其内容垂直居中排列 */
.container {
  margin-left: -2.5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1vh; /* 使用 vh 单位调整间距 */
  padding: 1vh 0; /* 预留空间，使滚动条不覆盖内容 */
  margin-top: 1vh;
  margin-bottom: 2vh;
}

/* 设置 box 的基础样式 */
.container .box {
  position: relative;
  width: 6vw; /* 使用 vw 单位设置宽度 */
  height: 1.5vw; /* 使用 vw 单位设置高度 */
  background: #1d3244;
  border-radius: 0.5vw; /* 使用 vw 单位设置圆角 */
  transition: 0.5s;
  
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #282c34; /* 背景颜色，可以根据需要更改 */
  color: white;
  font-size: 1vw; /* 字体大小，可以根据需要更改 */
  text-align: center;
  text-shadow: 2px 2px 4px #FFFFFF; /* 白色光影效果 */

}

/* 设置悬停时 box 的样式 */
.container .box.hovered {
  transform: scale(1.75);
  z-index: 10000;
  background: #1296ff;
  filter: drop-shadow(0 0 2vw #1296ff);
  box-shadow: 0 0 5vw rgba(0, 0, 0, 0.25);
}

/* 设置前一个和后一个相邻 box 的样式 */
.container .box.prev1,
.container .box.next1 {
  transform: scale(1.5);
  z-index: 3;
  background: #0d75c9;
  box-shadow: 0 0 5vw rgba(0, 0, 0, 0.15);
}

/* 设置前两个和后两个相邻 box 的样式 */
.container .box.prev2,
.container .box.next2 {
  transform: scale(1.25);
  z-index: 2;
  background: #08518d;
  box-shadow: 0 0 5vw rgba(0, 0, 0, 0.05);
}

/* 自定义按钮样式 */
.custom-button {
  margin-left: -3vh;
  margin-top: 0.5vh;
  margin-bottom: 2vh;
  font-size: 1.0vw; /* 使用 vw 单位调整字体大小 */
  display: inline-block;
  outline: 0;
  border: 0;
  cursor: pointer;
  will-change: box-shadow, transform;
  background: radial-gradient(100% 100% at 100% 0%, #89E5FF 0%, #5468FF 100%);
  box-shadow: 0px 0.01em 0.01em rgb(45 35 66 / 40%), 0px 0.3em 0.7em -0.01em rgb(45 35 66 / 30%), inset 0px -0.01em 0px rgb(58 65 111 / 50%);
  padding: 0 2vw; /* 使用 vw 单位调整内边距 */
  border-radius: 0.5vw; /* 使用 vw 单位调整圆角 */
  color: #fff;
  height: 2.6vw; /* 使用 vw 单位调整高度 */
  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.custom-button:hover {
  box-shadow: 0px 0.1em 0.2em rgb(45 35 66 / 40%), 0px 0.4em 0.7em -0.1em rgb(45 35 66 / 30%), inset 0px -0.1em 0px #3c4fe0;
  transform: translateY(-0.1em);
}

.custom-button:active {
  box-shadow: inset 0px 0.1em 0.6em #3c4fe0;
  transform: translateY(0em);
}

.containerLeftSolid{
  background-color: rgb(255, 255, 255);
  width: 24vh;
  margin-left: 2.3vh;
  margin-top: 3vh;
  /* display: flex; */
  flex-direction: column; /* 垂直排布 */
  align-items: center; /* 水平居中 */
}

.block2 {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中子元素 */
  width: 22vh;
  margin-bottom: 1vh; /* 修正单位为 vh */
  padding-left: 1vh;
}


.The-custom-slider0 {
  width: 30vh;
}

/* 自定义 el-slider 的样式 */
.The-custom-slider0 ::v-deep .el-slider__runway {
  height: 4px; /* 调整轨道高度 */
  background-color: #d7d7d7; /* 轨道颜色 */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 添加阴影 */
}

.The-custom-slider0 ::v-deep .el-slider__bar {
  background-color: rgb(59,89,152); /* 调整滑块颜色 */
  height: 4px; /* 确保滑块与轨道高度一致 */
  transition: background-color 0.3s; /* 添加颜色过渡效果 */
}

.The-custom-slider0 ::v-deep .el-slider__button {
  width: 14px; /* 调整滑块大小 */
  height: 14px; /* 调整滑块大小 */
  /* border: #0d75c9; 去掉默认边框 */
  box-shadow: 0 2px 5px rgba(83,185,224, 0.3); /* 添加阴影 */
  transition: transform 0.3s, background-color 0.3s; /* 添加变换和颜色过渡效果 */
}

.The-custom-slider0 ::v-deep .el-slider__button:hover {
  transform: scale(1.2); /* 鼠标悬停时放大效果 */
  background-color: rgb(59,89,152); /* 鼠标悬停时滑块颜色变化 */
}


.The-custom-slider1 {
  width: 30vh;
}

/* 自定义 el-slider 的样式 */
.The-custom-slider1 ::v-deep .el-slider__runway {
  height: 4px; /* 调整轨道高度 */
  background-color: #d7d7d7; /* 轨道颜色 */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 添加阴影 */
}

.The-custom-slider1 ::v-deep .el-slider__bar {
  background-color: rgb(0,172,237); /* 调整滑块颜色 */
  height: 4px; /* 确保滑块与轨道高度一致 */
  transition: background-color 0.3s; /* 添加颜色过渡效果 */
}

.The-custom-slider1 ::v-deep .el-slider__button {
  width: 14px; /* 调整滑块大小 */
  height: 14px; /* 调整滑块大小 */
  /* border: #0d75c9; 去掉默认边框 */
  box-shadow: 0 2px 5px rgba(83,185,224, 0.3); /* 添加阴影 */
  transition: transform 0.3s, background-color 0.3s; /* 添加变换和颜色过渡效果 */
}

.The-custom-slider1 ::v-deep .el-slider__button:hover {
  transform: scale(1.2); /* 鼠标悬停时放大效果 */
  background-color: rgb(0,172,237); /* 鼠标悬停时滑块颜色变化 */
}



.The-custom-slider2 {
  width: 30vh;
}

/* 自定义 el-slider 的样式 */
.The-custom-slider2 ::v-deep .el-slider__runway {
  height: 4px; /* 调整轨道高度 */
  background-color: #d7d7d7; /* 轨道颜色 */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 添加阴影 */
}

.The-custom-slider2 ::v-deep .el-slider__bar {
  background-color: rgb(221,75,57); /* 调整滑块颜色 */
  height: 4px; /* 确保滑块与轨道高度一致 */
  transition: background-color 0.3s; /* 添加颜色过渡效果 */
}

.The-custom-slider2 ::v-deep .el-slider__button {
  width: 14px; /* 调整滑块大小 */
  height: 14px; /* 调整滑块大小 */
  /* border: #0d75c9; 去掉默认边框 */
  box-shadow: 0 2px 5px rgba(230,106,90, 0.3); /* 添加阴影 */
  transition: transform 0.3s, background-color 0.3s; /* 添加变换和颜色过渡效果 */
}

.The-custom-slider2 ::v-deep .el-slider__button:hover {
  transform: scale(1.2); /* 鼠标悬停时放大效果 */
  background-color: rgb(221,75,57); /* 鼠标悬停时滑块颜色变化 */
}


.demonstration{
  font-size: 2vh;
}

/* 修改 containerone 样式 */
.containerone {
  display: flex;
  margin-left: -3vh;
  min-height: 60vh; /* 设置最小高度为 60vh */
  padding: 1vh; /* 通过添加填充来微调容器的高度 */
}

</style>